<style>
 .hiddenBorder{border:1px,solid #f00;box-shadow:0 0 10px #f00;}
</style>
<form name="editForm" role="form" novalidate ng-submit="vm.save()">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                ng-click="vm.clear()">&times;</button>
        <h4 class="modal-title" id="myCardLabel" data-translate="milkbeeApp.card.home.createOrEditLabel">Create or edit a Card</h4>
    </div>
    <div class="modal-body">
        <jhi-alert-error></jhi-alert-error>
        <div class="form-group" ng-show="vm.card.id" ng-show="false">
            <label for="id" data-translate="global.field.id">ID</label>
            <input type="text" class="form-control" id="id" name="id"
                    ng-model="vm.card.id" readonly />
        </div>
        <div class="form-group">
            <label class="control-label" data-translate="milkbeeApp.card.title" for="field_title">Title</label>
            <input type="text" class="form-control" name="title" id="field_title"
                    ng-model="vm.card.title" ng-minlength="10" required
                     />
                     
            <div ng-show="editForm.title.$invalid">
                <p class="help-block"
                    ng-show="true" data-translate="entity.validation.minlength" translate-value-min="10">
                    This field is required.
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label" data-translate="milkbeeApp.card.content" for="field_content">Content</label>
            <textarea type="text" class="form-control" name="content" id="field_content" ng-show="false"
                    ng-model="vm.card.content" required ng-minlength="10"
                     />     
            </div> 
            <div ng-show="editForm.content.$invalid">
                <p class="help-block"
                    ng-show="true" data-translate="entity.validation.minlength" translate-value-min="10">
                    This field is required.
                </p>
            </div>  
            <div id="hiddenBorder">         
			<div id="myeditor" name="myeditor">      
    		</div>
    		</div>
        </div>
        <div class="form-group" ng-show="true">
            <label class="control-label" 
            data-translate="milkbeeApp.card.attachment" for="field_attachment">Attachment</label>
           
           <div class="progress" ng-show="vm.doUpload">
  				<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="{{vm.currentProcess}}" aria-valuemin="0" aria-valuemax="100" style="width: {{vm.currentProcess}}%">
  				</div>
			</div>
           
            <input type="text" class="form-control" name="attachment" id="field_attachment"
                    ng-model="vm.card.attachment" ng-show="false"
                     />
             <input type="file" class="form-control" name="attachmentFile" 
             accept="application/zip" id="field_attachment_upload" 
             ngf-select="vm.onAttachmentSelect($files)"
             
             />
    
        </div>
        <div class="form-group" ng-show="vm.card.attachment">
            <label class="control-label" data-translate="milkbeeApp.card.cost" for="field_cost">Download</label>
            <input type="number" class="form-control" name="download" id="field_download"
                    ng-model="vm.card.cost"
                     />
        </div>
        
        
        
        
        
        
        
        
        
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.createdAt" for="field_createdAt">Created At</label>
                <div class="input-group">
                    <input id="field_createdAt" type="text" class="form-control" name="createdAt" datetime-picker="{{dateformat}}" ng-model="vm.card.createdAt" is-open="vm.datePickerOpenStatus.createdAt"
                      />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="vm.openCalendar('createdAt')"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </div>
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.modifiedAt" for="field_modifiedAt">Modified At</label>
                <div class="input-group">
                    <input id="field_modifiedAt" type="text" class="form-control" name="modifiedAt" datetime-picker="{{dateformat}}" ng-model="vm.card.modifiedAt" is-open="vm.datePickerOpenStatus.modifiedAt"
                      />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="vm.openCalendar('modifiedAt')"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </div>
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.leaguerId" for="field_leaguerId">Leaguer Id</label>
            <input type="number" class="form-control" name="leaguerId" id="field_leaguerId"
                    ng-model="vm.card.leaguerId"
                     />
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.userId" for="field_userId">User Id</label>
            <input type="number" class="form-control" name="userId" id="field_userId"
                    ng-model="vm.card.userId"
                     />
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.categoryId" for="field_categoryId">Category Id</label>
            <input type="number" class="form-control" name="categoryId" id="field_categoryId"
                    ng-model="vm.card.categoryId"
                     />
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.home" for="field_home">Home</label>
            <input type="checkbox" class="form-control" name="home" id="field_home"
                    ng-model="vm.card.home"
                     />
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.homeTitle" for="field_homeTitle">Home Title</label>
            <input type="text" class="form-control" name="homeTitle" id="field_homeTitle"
                    ng-model="vm.card.homeTitle"
                     />
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.commentCount" for="field_commentCount">Comment Count</label>
            <input type="number" class="form-control" name="commentCount" id="field_commentCount"
                    ng-model="vm.card.commentCount"
                     />
        </div> 
        <div class="form-group"ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.accusation" for="field_accusation">Accusation</label>
            <input type="number" class="form-control" name="accusation" id="field_accusation"
                    ng-model="vm.card.accusation"
                     />
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.look" for="field_look">Look</label>
            <input type="number" class="form-control" name="look" id="field_look"
                    ng-model="vm.card.look"
                     />
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.download" for="field_download">Download</label>
            <input type="number" class="form-control" name="download" id="field_download"
                    ng-model="vm.card.download"
                     />
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.light" for="field_light">Light</label>
            <input type="number" class="form-control" name="light" id="field_light"
                    ng-model="vm.card.light"
                     />
        </div>
        <div class="form-group" ng-show="false">
            <label class="control-label" data-translate="milkbeeApp.card.essence" for="field_essence">Essence</label>
            <input type="checkbox" class="form-control" name="essence" id="field_essence"
                    ng-model="vm.card.essence"
                     />
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()">
            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span data-translate="entity.action.cancel">Cancel</span>
        </button>
        <button type="submit" id="submitBtn" ng-disabled="editForm.title.$invalid || vm.cannotpost" class="btn btn-primary">
            <span class="glyphicon glyphicon-save"></span>&nbsp;<span data-translate="entity.action.save">Save</span>
        </button>
    </div>
</form>
